<template>
	<view class="content">

		<view class="steps">
			<view class="progress" :style="{width:(100/options.length)*(active+1)+'%'}">
			</view>
			<view class="steps-item" v-for="(list,index) in options" :key="index">
				<view class="steps-info">
					{{list.title}}
				</view>
			</view>
		</view>

		<view class="swiper">
			<slot name="container"></slot>
		</view>

		<view class="btn-con">
			<button type="default" @click="pre" v-if="active" size="mini">Pre</button>
			<button type="primary" @click="next" size="mini">Next</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				active: 0,
				options: [{
						title: '车辆'
					},
					{
						title: '受理人'
					},
					{
						title: '认证类型'
					},
					{
						title: '登记类型'
					},
					{
						title: '活体'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			pre() {
				this.active > 0 ? this.active-- : ""
			},
			next() {
				this.active < this.options.length - 1 ? this.active++ : ""
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(248, 248, 248);
	}

	.steps {
		width: 100%;
		height: 80rpx;
		box-shadow: 0 -1rpx 5rpx 0 #333;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;
		color: #333;
	}

	.steps-item {
		flex: 1;
		position: relative;
		padding: 1% 1% 1% 50rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.progress {
		width: 50px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(to right, #0040ff, #00c7fd);
		transition: 0.5s;
	}

	.progress::after {
		content: "";
		height: 0;
		width: 0;
		border-top: 40rpx solid transparent;
		border-bottom: 40rpx solid transparent;
		position: absolute;
		right: -40rpx;
		top: 0;
		border-left: 40rpx solid #00c7fd;
	}

	.swiper {
		width: auto;
		display: flex;
		min-height: 600rpx;
	}

	.btn-con {
		display: flex;
	}
</style>
